<template>
	<view class="container">
		<view  class="search-results-container">
			
			<view class="page-title">
				<text>{{ loa.customerName }}</text>
			</view>
					<div>
						授权开始日期：<text style="text-align: right;color: rgb(5, 167, 226);" >{{formatDate(loa.bgDate)}}</text>						
					</div>
					<div>
						授权结束日期：<text style="text-align: right;color: rgb(5, 167, 226);" >{{formatDate(loa.edDate)}}</text>
					</div>
					<div>
						授权签署日期：<text style="text-align: right;color: rgb(5, 167, 226);" >{{formatDate(loa.signDate)}}</text>
					</div>
					<div>
						<text>客户SAP编号：{{loa.customerId}}</text>
					</div>
					<div>
						<text>客户名称：{{loa.customerName}}</text>
					</div>
					<div>
						<text>创建人：{{loa.createAccount}}</text>
					</div>
					<div>
						<text>更新人：{{loa.updateAccount}}</text>
					</div>
			<div class="align-left-right" style="margin-bottom: 5px;">
				<text style="font-size: 16px; font-weight: bold;">明细</text>
				<text style="font-size: 16px; font-weight: bold;">共{{loa.deliLoaPersonList.length}}条明细</text>
			</div>
			<view v-for="(deliLoaPerson, index) in loa.deliLoaPersonList" :key="index"
				class="search-resultDetails-container">
				<uni-row>
					<uni-col :span="12">
						<div>
							<text>序号：{{ index+1}}</text>
						</div>
					</uni-col>
					<uni-col :span="12">
						<div>
							     <text>禁用：</text>
								<switch :checked="deliLoaPerson.disableFlag == '0'" disabled="true" size="20" />  
						</div>
					</uni-col>
				</uni-row>
						<div>
						授权人姓名：<text style="color: rgb(255, 151, 6);">{{deliLoaPerson.name}}</text>
						</div>
						<div>
						授权人手机号：<text style="color: rgb(255, 151, 6);">{{deliLoaPerson.phone}}</text>
						</div>
						<div>
						授权人身份证：<text style="color: rgb(255, 151, 6);">{{deliLoaPerson.idCard}}</text>
						</div>
				<uni-row>
					<uni-col :span="12">
						<div>
							<text>创建人：{{deliLoaPerson.createAccount}}</text>
						</div>
					</uni-col>
					<uni-col :span="12">
						<div>
							     <text>更新人：{{deliLoaPerson.updateAccount}}</text>
						</div>
					</uni-col>
				</uni-row>
				    <view class="separator-line" v-if="index < loa.deliLoaPersonList.length - 1"></view>
			</view>
			</view>
	</view>
</template>

<script>
	import {
			getLoa
		} from "@/api/order/loa";

	export default {
		mounted() {
					const loaId = this.$route.query.loaId;
					if (loaId) {
						this.loa.loaId = loaId;
						this.search(loaId);
					}
				},
				created() {
				},
				data() {
					return {
						loa: {
						        "createBy": null,
						        "createTime": null,
						        "updateBy":null,
						        "updateTime": null,
						        "remark": null,
						        "keyVI": null,
						        "key": null,
						        "aesData": null,
						        "rsa": null,
						        "data": null,
						        "sign": null,
						        "loaId": null,
						        "bgDate": null,
						        "edDate": null,
						        "signDate":null,
						        "customerId": null,
						        "customerName": null,
						        "createAccount": null,
						        "updateAccount": null,
						        "comment": null,
						        "account": null,
						        "name": null,
						        "phone": null,
						        "idCard": null,
						        "email": null,
						        "informType": null,
						        "informWay": null,
						        "wechatName": null,
						        "wechatPhone": null,
						        "customerList": null,
						        "deliLoaPersonList": [
						            {
						                "createBy": null,
						                "createTime": null,
						                "updateBy": null,
						                "updateTime": null,
						                "remark": null,
						                "keyVI": null,
						                "key": null,
						                "aesData": null,
						                "rsa": null,
						                "data": null,
						                "sign": null,
						                "personId":null,
						                "loaId":null,
						                "account": null,
						                "name": null,
						                "phone": null,
						                "idCard": null,
						                "email": null,
						                "informType":null,
						                "informWay": null,
						                "wechatName": null,
						                "wechatPhone": null,
						                "comment": null,
						                "createAccount": null,
						                "updateAccount": null,
						                "wechatOpenid": null,
						                "disableFlag":null,
						                "edDate": null,
						                "customerId": null
						            }
						        ]
						    },
						loa: {
							customerName: '',
							begDa: '',
							endDa: '',
						},
						deliLoaPersonList: [],
						};
				},
				onShow() {
				},
				methods: {
					formatDate(dateStr) {
					      const parts = dateStr.split(' '); 
					      const dateParts = parts[0].split('-'); 
					      return `${dateParts[0]}-${dateParts[1]}-${dateParts[2]}`;   
					},
					search(loaId) {
						  getLoa(loaId).then(response => {
						          this.loa = response.data;
						          this.deliLoaPersonList = response.data.deliLoaPersonList;
						        });
					},
				},
	};
</script>

<style>
	.container {
		dispaly: flex;
		flex-direction: row;
		flex: auto;
		background-color: #fff;
		font-size: 16px;
	}

	.search-param {
		background-color: #fff;
		text-align: center;
		/* 将内容设置为居中 */
	}

	.datetime-picker-container {
		flex: 1;
		text-align: center;
		/* 将内容设置为居中 */
	}

	.search-results-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 200%;
		padding: 3px;
		background-color: #fff;
		border-bottom: 2px solid #f5f5f5;
	}

	.search-resultDetails-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 200%;
		padding: 3px;
		background-color: #f5f5f5;
	}

	.search-result {
		flex: 1;
		/* 使每个内部元素均等分布 */
		margin-bottom: 10px;
		/* 设置底部边距 */
		background-color: #fff;
		border-top: 4px solid #f5f5f5;
		/* 设置底部边框颜色 */
		padding: 4px;
		/* 设置内边距 */
	}

	.spacing {
		margin-right: 100px;
	}

	.right-align-1 {
		text-align: right;
	}

	.right-align-2 {
		text-align: right;
	}

	.align-left-right {
		display: flex;
		justify-content: space-between;
		margin-right: 20px;
	}

	.search-results-container div {
		padding: 3px;
	}

	.apply-button {
		font-size: 12px;
		border: 1px solid orange;
		border-radius: 4px;
		color: orange;
		margin-right: 10px;
		width: 80px;
		margin-top: 4px;
		margin-bottom: 4px;
	}
	
	.page-title {
		background: #3e7baf;
		color: #fff;
		text-align: center;
		font-size: 1.3rem;
		font-weight: "300";
		margin-bottom: 20px;
	}
	
	.separator-line {  
	  height: 1px;  
	  background-color: #ccc;  
	  margin: 5px 0;  
	}  
</style>